import React from 'react'
import repeatSong from '@/assets/fonts/music/repeatSong.svg'
import prevSong from '@/assets/fonts/music/prveSong.svg'
import stopSong from '@/assets/fonts/music/stopSong.svg'
import startSong from '@/assets/fonts/music/startSong.svg'
import nextSong from '@/assets/fonts/music/nextSong.svg'
import word from '@/assets/fonts/music/word.svg'
import { useAudioContext } from '@/views/Audio/Audio' 

function MusicControl() {
    const audioDispatch = useAudioContext()
    const play = audioDispatch.audioPlay

  return (
    <div className="musicControl">
        <ul>
            <li>
                <img src={repeatSong} alt="" />
            </li>
            <li>
                <img src={prevSong} alt="" onClick={()=>audioDispatch.nextSong(-1)}/>
            </li>
            <li style={{display: play ? 'none' : ''}}>
                <img src={stopSong} alt="" style={{width:'25px',height:'25px'}} onClick={()=>audioDispatch.StartOrStop()}/>
            </li>
            <li style={{display: !play ? 'none' : ''}} > 
                <img src={startSong} alt="" style={{width:'25px',height:'25px'}} onClick={()=>audioDispatch.StartOrStop()}/>
            </li>
            <li>
                <img src={nextSong} alt="" onClick={()=>audioDispatch.nextSong(1)}/>
            </li>
            <li>
                <img src={word} alt="" />
            </li>
        </ul>
    </div>
  )
}

export default React.memo(MusicControl)